<template>
  <div class="module-header">
    {{ `创建物料` }}
    <div class="module-header-search">
        <el-button size="default" type="primary" @click="onRouterBack">返回</el-button>
        <el-button size="default" type="primary" @click="onSubmitBom">保存</el-button>
    </div>
  </div>
  <div class="create-order-view">
    <div class="input-order-view">
      <el-row>
        <el-col :span="14">
          <el-form :model="newBom" label-width="100px" size="default">
            <el-form-item label="物料编号：">
              <el-input v-model="newBom.code"/>
            </el-form-item>
            <el-form-item label="物料名称：">
              <el-input v-model="newBom.name"/>
            </el-form-item>

            <el-form-item label="物料单价：">
              <el-input v-model="newBom.price"/>
            </el-form-item>
            <el-form-item label="物料宽度：">
              <el-input v-model="newBom.width"/>
            </el-form-item>
            <el-form-item label="物料长度：">
              <el-input v-model="newBom.length"/>
            </el-form-item>
            <el-form-item label="物料单位：">
              <el-switch v-model="newBom.unit"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #49b9ff"
                         active-text="张"
                         inactive-text="套"
                         active-value="张"
                         inactive-value="套"
              />
            </el-form-item>
            <el-form-item label="每卷数量：">
              <el-select v-model="newBom.quantity" clearable filterable placeholder="选择每卷数量" style="width:100%;">
                <el-option label="非卷标" :value="0" key="0">非卷标</el-option>
                <el-option label="3000个/卷" :value="3000" key="3000">3000个/卷</el-option>
                <el-option label="4000个/卷" :value="4000" key="4000">4000个/卷</el-option>
                <el-option label="6000个/卷" :value="6000" key="6000">6000个/卷</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物料材料：">
              <el-select v-model="newBom.material" clearable filterable placeholder="选择材料" style="width:100%;">
                <el-option v-for="item in matList" :key="item.id" :label="'（' + item.code + '）' + item.name"
                           :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="物料分类：">
              <el-select v-model="newBom.category" clearable filterable placeholder="选择物料分类" style="width:100%;">
                <el-option v-for="item in bomCategory" :key="item"
                           :label="'（' + item.code + '）' + item.label" :value="item.code"/>
              </el-select>
            </el-form-item>
            <el-form-item label="物料版本：">
              <el-input v-model="newBom.version"/>
            </el-form-item>
            <el-form-item label="版本备注：">
              <el-input v-model="newBom.versionNote"/>
            </el-form-item>
            <el-form-item label="物料备注：">
              <el-input v-model="newBom.note"/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import {mixins, Options} from 'vue-class-component';
import BomModel from "@/models/BomModel";
import {getBomById, saveBom} from "@/apis/bom.api";
import DictMixin from "@/mixins/dict.mixin";
import MaterialModel from "@/models/MaterialModel";
import DictionaryModel from "@/models/DictionaryModel";

@Options({})
export default class BomCreateView extends mixins(DictMixin) {
  newBom: BomModel = new BomModel();
  matList: MaterialModel[] = [];
  bomId: string | string[] = '';
  bomCategory: DictionaryModel[] | null = null;

  created() {
    this.bomCategory = this.getSystemDict('BOM_CATEGORY');
    this.matList = this.getUserDict<MaterialModel>('MATERIAL_TYPE')

    this.bomId = this.$route.params['id'];

    if (this.bomId) {
      getBomById(this.bomId).then(bom => {
        this.newBom = bom;
      })
    }
  }

  onSubmitBom(): void {
    saveBom(this.newBom).then((value: BomModel): void => {
      console.log(value)
    });
  }

  onRouterBack(): void {
    this.$router.push('/bom');
  }
}
</script>
<style scoped lang="scss">
.input-order-view {
  padding: 40px;
}
</style>